fix: Transparent ExpandableCalendar #2653

freely322 · 2025-05-01T11:26:08Z

The issue related to dynamic headerHeight was not set.

Introduced a ref to conditionally measure header height only when necessary.
Updated onHeaderLayout to prevent unnecessary state updates.
Adjusted onLayout prop for Animated.View to utilize the new measurement logic.

Related issues:
#2625
#2693
#2681
#2670
#2657
#2571
#2722

- Introduced a ref to conditionally measure header height only when necessary. - Updated onHeaderLayout to prevent unnecessary state updates. - Adjusted onLayout prop for Animated.View to utilize the new measurement logic.

Satyam-code143 · 2025-06-14T05:53:00Z

Hi @freely322 ,
Is there a ETA for this? This is really causing a issues even while using a loading flag from redux.

freely322 · 2025-07-08T11:35:06Z

@nitzanyiz @Inbal-Tish @ethanshar Take a look please

carlbleick · 2025-08-05T14:16:07Z

I upgraded to "react-native-calendars": "1.1313.0" today and applied this PR to fix the invisible ExpandableCalendar. While everything was working fine on iOS, I had a styling issue on Android because of a header height that was too small.

Right now I just did a "dirty" fix by adding 5px to the height when using android…

const shouldMeasureHeader = useRef(true);
    const onHeaderLayout = useCallback(
        ({
            nativeEvent: {
                layout: { height },
            },
        }) => {
            const _height = Platform.OS === "android" ? height + 5 : height;
            if (_height !== headerHeight) {
                setHeaderHeight(_height || DEFAULT_HEADER_HEIGHT);
            }
            shouldMeasureHeader.current = false;
        },
        [headerHeight]
    );

freely322 · 2025-08-08T15:16:54Z

I upgraded to "react-native-calendars": "1.1313.0" today and applied this PR to fix the invisible ExpandableCalendar. While everything was working fine on iOS, I had a styling issue on Android because of a header height that was too small.

Right now I just did a "dirty" fix by adding 5px to the height when using android…

const shouldMeasureHeader = useRef(true);
    const onHeaderLayout = useCallback(
        ({
            nativeEvent: {
                layout: { height },
            },
        }) => {
            const _height = Platform.OS === "android" ? height + 5 : height;
            if (_height !== headerHeight) {
                setHeaderHeight(_height || DEFAULT_HEADER_HEIGHT);
            }
            shouldMeasureHeader.current = false;
        },
        [headerHeight]
    );

thanks for testing, I will check soon

ajp8164 · 2025-08-11T16:22:22Z

Here's a patch for this fix.

diff --git a/node_modules/react-native-calendars/src/expandableCalendar/index.js b/node_modules/react-native-calendars/src/expandableCalendar/index.js
index bea00e0..bf92441 100644
--- a/node_modules/react-native-calendars/src/expandableCalendar/index.js
+++ b/node_modules/react-native-calendars/src/expandableCalendar/index.js
@@ -61,9 +61,11 @@ const ExpandableCalendar = forwardRef((props, ref) => {
     horizontal = true, calendarStyle, theme, style: propsStyle, firstDay = 0, onDayPress, hideArrows, onPressArrowLeft, onPressArrowRight, renderArrow, testID, ...others } = props;
     const [screenReaderEnabled, setScreenReaderEnabled] = useState(false);
     const [headerHeight, setHeaderHeight] = useState(0);
+    const shouldMeasureHeader = useRef(true);
     const onHeaderLayout = useCallback(({ nativeEvent: { layout: { height } } }) => {
-        setHeaderHeight(height || DEFAULT_HEADER_HEIGHT);
-    }, []);
+      if (height !== headerHeight) { setHeaderHeight(height || DEFAULT_HEADER_HEIGHT); }
+      shouldMeasureHeader.current = false;
+    }, [headerHeight]);
     /** Date */
     const getYear = (date) => {
         const d = new XDate(date);
@@ -411,7 +413,7 @@ const ExpandableCalendar = forwardRef((props, ref) => {
         return (<CalendarList testID={`${testID}.calendarList`} horizontal={horizontal} firstDay={firstDay} calendarStyle={calendarStyle} onHeaderLayout={onHeaderLayout} {...others} current={date} theme={themeObject} ref={calendarList} onDayPress={_onDayPress} onVisibleMonthsChange={onVisibleMonthsChange} pagingEnabled scrollEnabled={isOpen} hideArrows={shouldHideArrows} onPressArrowLeft={_onPressArrowLeft} onPressArrowRight={_onPressArrowRight} hideExtraDays={!horizontal && isOpen} renderArrow={_renderArrow} staticHeader numberOfDays={numberOfDays} headerStyle={_headerStyle} timelineLeftInset={timelineLeftInset} context={_context}/>);
     };
     return (<View testID={testID} style={containerStyle}>
-      {screenReaderEnabled ? (<Calendar testID={`${testID}.calendarAccessible`} {...others} theme={themeObject} onHeaderLayout={onHeaderLayout} onDayPress={_onDayPress} hideExtraDays renderArrow={_renderArrow}/>) : (<Animated.View testID={`${testID}.expandableContainer`} ref={wrapper} style={wrapperStyle} {...panResponder.panHandlers}>
+      {screenReaderEnabled ? (<Calendar testID={`${testID}.calendarAccessible`} {...others} theme={themeObject} onHeaderLayout={onHeaderLayout} onDayPress={_onDayPress} hideExtraDays renderArrow={_renderArrow}/>) : (<Animated.View testID={`${testID}.expandableContainer`} ref={wrapper} style={wrapperStyle} onLayout={shouldMeasureHeader.current ? onHeaderLayout : undefined} {...panResponder.panHandlers}>
           {renderCalendarList()}
           {renderWeekCalendar()}
           {!hideKnob && renderKnob()}

NorseGaud · 2025-08-21T03:11:02Z

Wow, this is a painful bug that wasted a bunch of time... When will this be merged in? I manually patched.

NiharR027 · 2025-08-25T02:02:07Z

Here's a patch for this fix.

diff --git a/node_modules/react-native-calendars/src/expandableCalendar/index.js b/node_modules/react-native-calendars/src/expandableCalendar/index.js
index bea00e0..bf92441 100644
--- a/node_modules/react-native-calendars/src/expandableCalendar/index.js
+++ b/node_modules/react-native-calendars/src/expandableCalendar/index.js
@@ -61,9 +61,11 @@ const ExpandableCalendar = forwardRef((props, ref) => {
     horizontal = true, calendarStyle, theme, style: propsStyle, firstDay = 0, onDayPress, hideArrows, onPressArrowLeft, onPressArrowRight, renderArrow, testID, ...others } = props;
     const [screenReaderEnabled, setScreenReaderEnabled] = useState(false);
     const [headerHeight, setHeaderHeight] = useState(0);
+    const shouldMeasureHeader = useRef(true);
     const onHeaderLayout = useCallback(({ nativeEvent: { layout: { height } } }) => {
-        setHeaderHeight(height || DEFAULT_HEADER_HEIGHT);
-    }, []);
+      if (height !== headerHeight) { setHeaderHeight(height || DEFAULT_HEADER_HEIGHT); }
+      shouldMeasureHeader.current = false;
+    }, [headerHeight]);
     /** Date */
     const getYear = (date) => {
         const d = new XDate(date);
@@ -411,7 +413,7 @@ const ExpandableCalendar = forwardRef((props, ref) => {
         return (<CalendarList testID={`${testID}.calendarList`} horizontal={horizontal} firstDay={firstDay} calendarStyle={calendarStyle} onHeaderLayout={onHeaderLayout} {...others} current={date} theme={themeObject} ref={calendarList} onDayPress={_onDayPress} onVisibleMonthsChange={onVisibleMonthsChange} pagingEnabled scrollEnabled={isOpen} hideArrows={shouldHideArrows} onPressArrowLeft={_onPressArrowLeft} onPressArrowRight={_onPressArrowRight} hideExtraDays={!horizontal && isOpen} renderArrow={_renderArrow} staticHeader numberOfDays={numberOfDays} headerStyle={_headerStyle} timelineLeftInset={timelineLeftInset} context={_context}/>);
     };
     return (<View testID={testID} style={containerStyle}>
-      {screenReaderEnabled ? (<Calendar testID={`${testID}.calendarAccessible`} {...others} theme={themeObject} onHeaderLayout={onHeaderLayout} onDayPress={_onDayPress} hideExtraDays renderArrow={_renderArrow}/>) : (<Animated.View testID={`${testID}.expandableContainer`} ref={wrapper} style={wrapperStyle} {...panResponder.panHandlers}>
+      {screenReaderEnabled ? (<Calendar testID={`${testID}.calendarAccessible`} {...others} theme={themeObject} onHeaderLayout={onHeaderLayout} onDayPress={_onDayPress} hideExtraDays renderArrow={_renderArrow}/>) : (<Animated.View testID={`${testID}.expandableContainer`} ref={wrapper} style={wrapperStyle} onLayout={shouldMeasureHeader.current ? onHeaderLayout : undefined} {...panResponder.panHandlers}>
           {renderCalendarList()}
           {renderWeekCalendar()}
           {!hideKnob && renderKnob()}

+1 the above fixed for me... only thing that I had to change was that I always had to add height + 5 for both android and iOS, else it would look like how @carlbleick mentioned in this comment. For him it was fine on iOS, but for me it was hiding the days slightly a bit for both OS.

So, pretty much what @ajp8164 had but with +5... so looks like this

@@ -0,0 +1,28 @@
diff --git a/src/expandableCalendar/index.js b/src/expandableCalendar/index.js
index bea00e0168a338eb19d3eee2ddd7ee8d0470b745..404ae259b00571b78deb000509d2f5d09816d29c 100644
--- a/src/expandableCalendar/index.js
+++ b/src/expandableCalendar/index.js
@@ -61,9 +61,12 @@ const ExpandableCalendar = forwardRef((props, ref) => {
     horizontal = true, calendarStyle, theme, style: propsStyle, firstDay = 0, onDayPress, hideArrows, onPressArrowLeft, onPressArrowRight, renderArrow, testID, ...others } = props;
     const [screenReaderEnabled, setScreenReaderEnabled] = useState(false);
     const [headerHeight, setHeaderHeight] = useState(0);
+    const shouldMeasureHeader = useRef(true);
     const onHeaderLayout = useCallback(({ nativeEvent: { layout: { height } } }) => {
-        setHeaderHeight(height || DEFAULT_HEADER_HEIGHT);
-    }, []);
+        const _height = (height || DEFAULT_HEADER_HEIGHT) + 5;
+      if (height !== headerHeight) { setHeaderHeight(_height); }
+      shouldMeasureHeader.current = false;
+    }, [headerHeight]);
     /** Date */
     const getYear = (date) => {
         const d = new XDate(date);
@@ -411,7 +414,7 @@ const ExpandableCalendar = forwardRef((props, ref) => {
         return (<CalendarList testID={`${testID}.calendarList`} horizontal={horizontal} firstDay={firstDay} calendarStyle={calendarStyle} onHeaderLayout={onHeaderLayout} {...others} current={date} theme={themeObject} ref={calendarList} onDayPress={_onDayPress} onVisibleMonthsChange={onVisibleMonthsChange} pagingEnabled scrollEnabled={isOpen} hideArrows={shouldHideArrows} onPressArrowLeft={_onPressArrowLeft} onPressArrowRight={_onPressArrowRight} hideExtraDays={!horizontal && isOpen} renderArrow={_renderArrow} staticHeader numberOfDays={numberOfDays} headerStyle={_headerStyle} timelineLeftInset={timelineLeftInset} context={_context}/>);
     };
     return (<View testID={testID} style={containerStyle}>
-      {screenReaderEnabled ? (<Calendar testID={`${testID}.calendarAccessible`} {...others} theme={themeObject} onHeaderLayout={onHeaderLayout} onDayPress={_onDayPress} hideExtraDays renderArrow={_renderArrow}/>) : (<Animated.View testID={`${testID}.expandableContainer`} ref={wrapper} style={wrapperStyle} {...panResponder.panHandlers}>
+      {screenReaderEnabled ? (<Calendar testID={`${testID}.calendarAccessible`} {...others} theme={themeObject} onHeaderLayout={onHeaderLayout} onDayPress={_onDayPress} hideExtraDays renderArrow={_renderArrow}/>) : (<Animated.View testID={`${testID}.expandableContainer`} ref={wrapper} style={wrapperStyle} onLayout={shouldMeasureHeader.current ? onHeaderLayout : undefined} {...panResponder.panHandlers}>
           {renderCalendarList()}
           {renderWeekCalendar()}
           {!hideKnob && renderKnob()}

freely322 · 2025-08-27T15:34:59Z

Just applied fix of issue mentioned above.

NiharR27 · 2025-08-28T23:59:15Z

Will also fix #2722

NiharR27 · 2025-08-29T00:06:59Z

@Inbal-Tish @nitzanyiz - please have a look at this PR 🙏🏽

sdjg113 · 2025-08-31T03:38:05Z

The fix is not ideal.  I render  no header  renderHeader={() => null}  and it will show two rows .

I am using this hack to force a re-render so it can properly measure the row height. 

  const [forceRenderKey, setForceRenderKey] = useState(0)
  // Force re-render to work around ExpandableCalendar headerHeight === 0 bug
  useEffect(() => {
    const timer = setTimeout(() => {
      setForceRenderKey(1)
    }, 10)
    return () => clearTimeout(timer)
  }, [])

         <ExpandableCalendar
            key={forceRenderKey}
            testID="expandableCalendar"

AndreMaz · 2025-09-01T05:50:23Z

@ethanshar @Inbal-Tish @nitzanyiz can you take a look at this?

francoangulo · 2025-09-09T11:57:45Z

also having this issue, @ethanshar @Inbal-Tish @nitzanyiz will anyone take a look at this?

AndreMaz · 2025-10-03T11:53:54Z

I'm migrating to expo v54 + react native v0.81 and this issue is back even after applying the patch #2653 (comment)

Did anyone managed to solve this issue? If so, how?

francoangulo · 2025-10-03T11:57:19Z

Not me, I had to roll back to v1.1289.0

Refactor ExpandableCalendar header layout measurement logic

b6ac36f

- Introduced a ref to conditionally measure header height only when necessary. - Updated onHeaderLayout to prevent unnecessary state updates. - Adjusted onLayout prop for Animated.View to utilize the new measurement logic.

freely322 mentioned this pull request Jul 8, 2025

ExpandableCalendar sometimes does not render after receving push notifications #2693

Open

ExpandableCalendar header crop fix

696e95f

NiharR27 mentioned this pull request Aug 28, 2025

Expandable calendar invisible #2722

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix: Transparent ExpandableCalendar #2653

fix: Transparent ExpandableCalendar #2653

freely322 commented May 1, 2025 •

edited

Loading

Uh oh!

Satyam-code143 commented Jun 14, 2025

Uh oh!

freely322 commented Jul 8, 2025

Uh oh!

carlbleick commented Aug 5, 2025

Uh oh!

freely322 commented Aug 8, 2025

Uh oh!

ajp8164 commented Aug 11, 2025

Uh oh!

NorseGaud commented Aug 21, 2025

Uh oh!

NiharR027 commented Aug 25, 2025 •

edited

Loading

Uh oh!

freely322 commented Aug 27, 2025

Uh oh!

NiharR27 commented Aug 28, 2025

Uh oh!

NiharR27 commented Aug 29, 2025

Uh oh!

sdjg113 commented Aug 31, 2025

Uh oh!

AndreMaz commented Sep 1, 2025

Uh oh!

francoangulo commented Sep 9, 2025

Uh oh!

AndreMaz commented Oct 3, 2025

Uh oh!

francoangulo commented Oct 3, 2025

Uh oh!

Uh oh!

fix: Transparent ExpandableCalendar #2653

Are you sure you want to change the base?

fix: Transparent ExpandableCalendar #2653

Conversation

freely322 commented May 1, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Satyam-code143 commented Jun 14, 2025

Uh oh!

freely322 commented Jul 8, 2025

Uh oh!

carlbleick commented Aug 5, 2025

Uh oh!

freely322 commented Aug 8, 2025

Uh oh!

ajp8164 commented Aug 11, 2025

Uh oh!

NorseGaud commented Aug 21, 2025

Uh oh!

NiharR027 commented Aug 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

freely322 commented Aug 27, 2025

Uh oh!

NiharR27 commented Aug 28, 2025

Uh oh!

NiharR27 commented Aug 29, 2025

Uh oh!

sdjg113 commented Aug 31, 2025

Uh oh!

AndreMaz commented Sep 1, 2025

Uh oh!

francoangulo commented Sep 9, 2025

Uh oh!

AndreMaz commented Oct 3, 2025

Uh oh!

francoangulo commented Oct 3, 2025

Uh oh!

Uh oh!

freely322 commented May 1, 2025 •

edited

Loading

NiharR027 commented Aug 25, 2025 •

edited

Loading